<template>
      <div style="display:flex;justify-content: flex-start;min-width: 700px">
            <MenuTree style="border-radius: 15px 0 0 15px;"/>
            <div style="overflow-x:hidden;flex: 1;" class="scrollDiv">
                <div style="width:100%;height:45px;border-bottom: 1px solid #d4d7de;">
                    <Header/>
                </div>
                <el-scrollbar class="menuBar">
                    <div class="scrollbar-flex-content" >
                        <p v-for="item in navTabStores.tabs" @click="routeTo(item)" :key="item.name"
                           :class="item.clicked ? 'commonBtn checked':'commonBtn unchecked'" >
                            <span style="cursor:pointer">{{ item.name }}</span>
                            &nbsp;
                            <el-icon @click.stop="removeTab(item)" v-show="item.name != '主页'" ><Close />
                            </el-icon>
                        </p>
                    </div>
                </el-scrollbar>

                <div class="scrollDiv" style="margin:20px 5px 0 5px;overflow-x:hidden;overflow-y: auto;height: calc(100vh - 110px)">

                        <router-view v-slot="{ Component }">

                                <transition name="router_animate">
                                    <keep-alive include="OnlineChat,ProductSpuAdd">
                                    <component :is="Component" />
                                    </keep-alive>
                                </transition>

                        </router-view>

                </div>
            </div>
    </div>
</template>
<script setup>
    import MenuTree from '@/components/MenuTree.vue'
    import Header from '@/components/Header.vue'
    import {onMounted,reactive,ref } from 'vue'
    import {ArrowDown} from '@element-plus/icons-vue'
    import { openState } from '@/stores/openState'
    import {navTab} from '@/stores/navTab'
    let navTabStores = navTab()
    let menuState = openState()
    onMounted(function () {
        let item = {name: '主页', path:'/main', clicked:true}// 登录进来默认跳转到主页
        routeTo(item)
    })
function routeTo(item) {
    navTabStores.routeTo(item)
}

function removeTab(item) {
    navTabStores.removeTab(item)
}
</script>
<style scoped>
    .trans{
        transition:width .3s linear;
    }
    .scrollbar-flex-content {
        display: flex;
    }
    .commonBtn{
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        min-width: 80px;
        line-height: 24px;
        margin: 2px 1px;
        padding:0 10px;
        text-align: center;
    }
    .unchecked {
        background: #ffffff;
        color: #000;
        border:1px solid #838dff;
    }
    .checked{
        background: #0483e8;
        color: #fff;
        border:1px solid #838dff;
    }
    .menuBar{
        background-color: #ffffff;
        box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.1);
        height: 30px;
        z-index:999;
        /*transition:all .5s linear;*/
        overflow-x:hidden;
    }

    .scrollDiv::-webkit-scrollbar {
        width: 0px;
    }
    .scrollDiv::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        opacity: 0.2;
    }
    .scrollDiv::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
    }
    .router_animate-enter-active {
        animation: fadeInUp .3s;
    }
</style>